<!--菜品管理员端会员卡管理-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">菜品管理员端</el-breadcrumb-item>
    <el-breadcrumb-item>会员卡管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-table :data="cardList"
            class="table"
            :header-cell-style = "headerStyle"
            :cell-style = "cellStyle"
            @expand-change="getVipGoods"
            :key="cardList.type"
  >
    <el-table-column type="expand">
      <template #default="scope">
        <template v-if="isV(scope.row.type)">
          <div style="font-size: 20px; font-weight: bolder">蔬菜类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'蔬菜']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isM(scope.row.type)">
          <div style="margin-top: 35px">
            <div style="font-size: 20px; font-weight: bolder">肉类</div>
            <div class="good_list">
              <template v-for="(item, index) in vipGoods[scope.row.type+'肉']" :key="index">
                <dl>
                  <dt><img :src="item.images" alt="good"></dt>
                  <dd>{{item.dishesName}} </dd>
                  <div class="doGoods">
                    <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                    <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                  </div>
                </dl>
                <!--            </template>-->
              </template>
            </div>
          </div>
        </template>
        <template v-if="isE(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">蛋类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'蛋']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isF(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">水产类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'水产']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isB(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">特产类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'特产']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isR(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">大米类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'大米']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isC(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">玉米类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'玉米']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isFF(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">水果类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'水果']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isBB(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">禽类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'禽类']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isMM(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">畜肉类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'畜肉']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
        <template v-if="isFFF(scope.row.type)">
          <div style="margin-top: 35px"></div>
          <div style="font-size: 20px; font-weight: bolder">赠品类</div>
          <div class="good_list">
            <template v-for="(item, index) in vipGoods[scope.row.type+'赠品']" :key="index">
              <dl>
                <dt><img :src="item.images" alt="good"></dt>
                <dd>{{item.dishesName}} </dd>
                <div class="doGoods">
                  <div><el-button @click="changeThisVipGoodsStatus(scope.row.type, item.id)">编辑</el-button></div>
                  <div><el-button @click="deleteVipGoods(scope.row.type, item.id)">删除</el-button></div>
                </div>
              </dl>
              <!--            </template>-->
            </template>
          </div>
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="会员卡名称" />
    <el-table-column prop="introduction" label="会员卡描述" show-overflow-tooltip/>
    <el-table-column label="菜品操作">
      <template #default="scope">
        <!--修改按钮-->
        <el-button title="修改本周菜单" type="primary" :icon="Edit" size='large' @click='dialogVisibleCg(scope.row.type)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
        <el-button title="添加菜品上限" type="primary" :icon="Sunny" size='large' @click='dialogVisibleAddGCMethod(scope.row.type)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
        <el-button title="修改菜品上限" v-if="cgGCBtn" type="primary" :icon="Moon" size='large' @click='dialogVisibleChangeGCMethod(scope.row.type)' style="border: 1px solid white; background-color: rgb(57,62,74)" ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  修改本周菜品-->
  <el-dialog
      title="修改本周菜单"
      :model-value="dialogVisibleChange"
      :close-on-click-modal= "false"
      width="50%" @close='closeChange'>
    <el-form label-width='70px' :model='changeForm' ref='changeRef'>
<!--      <el-form-item prop='type'>-->
<!--        <span>菜品分类：&nbsp;</span>-->
<!--        <el-select v-model="changeForm.type" class="m-2" style="width: 70%">-->
<!--          <el-option-->
<!--              v-for="item in goodCat"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item prop="dishesId">
        <span>选择菜品：&nbsp;</span>
        <el-select
            v-model="changeForm.dishesId"
            filterable
            remote
            placeholder="请选择菜品"
            :loading="loading"
            style="width: 70%"
        >
          <el-option
              v-for="item in goodOptions"
              :key="item.id"
              :label="item.dishesName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item prop="quantity">-->
<!--        <span>菜品数量：&nbsp;</span>-->
<!--        <el-input v-model="changeForm.quantity" style="width: 70%"/>-->
<!--      </el-form-item>-->
      <el-form-item prop="cycle">
        <span>配送周期：&nbsp;</span>
                <el-select v-model="changeForm.cycle" class="m-2" style="width: 70%">
                  <el-option
                      v-for="item in cycleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
      </el-form-item>
      <el-form-item prop="frequency">
        <span>配送次数：&nbsp;</span>
        <el-input v-model="changeForm.frequency" style="width: 70%"/>
      </el-form-item>
      <el-form-item>

      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="changeVipGoods()">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>
  <!--  修改会员卡下菜品配送状态-->
  <el-dialog
      title="修改菜品配送周期"
      :model-value="dialogVisibleChangeGood"
      :close-on-click-modal= "false"
      width="50%" @close='closeChangeStatus'>
    <el-form label-width='70px' :model='cgStatusForm' ref='changeStatusRef'>
      <el-form-item prop="dishesName">
        <span>当前菜品：&nbsp;</span>
        <el-input v-model="cgStatusForm.dishesName" style="width: 70%" :disabled="true"/>
      </el-form-item>
      <el-form-item prop="cycle">
        <span>配送周期：&nbsp;</span>
        <el-select v-model="cgStatusForm.cycle" class="m-2" style="width: 70%">
          <el-option
              v-for="item in cycleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="frequency">
        <span>配送次数：&nbsp;</span>
        <el-input v-model="cgStatusForm.frequency" style="width: 70%"/>
      </el-form-item>
      <el-form-item>

      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleChangeGood = false">取 消</el-button>
          <el-button type="primary" @click="changeVipGoodsStatus()">确 定</el-button>
		  <!-- <el-button type="primary" @click="console.log(cgStatusForm)">确 定</el-button> -->
        </span>
      </div>
    </el-form>
  </el-dialog>

  <!--  添加会员卡菜分类上限-->
  <el-dialog
      title="添加会员卡菜分类上限"
      :model-value="dialogVisibleAddGC"
      :close-on-click-modal= "false"
      width="50%" @close='closeAddGC'>
    <el-form label-width='70px' :model='addGCForm' ref='addGCRef'>
      <el-form-item prop="list[0].upperLimit">
        <span>蔬菜上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[0].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[1].upperLimit">
        <span>肉类上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[1].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[2].upperLimit">
        <span>蛋类上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[2].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[3].upperLimit">
        <span>禽类上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[3].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[4].upperLimit">
        <span>玉米上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[4].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[5].upperLimit">
        <span>水果上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[5].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[6].upperLimit">
        <span>畜肉上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[6].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[7].upperLimit">
        <span>水产上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[7].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[8].upperLimit">
        <span>大米上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[8].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[9].upperLimit">
        <span>特产上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[9].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[10].upperLimit">
        <span>赠品上限：&nbsp;</span>
        <el-input v-model="addGCForm.list[10].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item>

      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleAddGC = false">取 消</el-button>
          <el-button type="primary" @click="addVipGoodsCat()">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>
  <!--  修改会员卡菜分类上限-->
  <el-dialog
      title="修改会员卡菜分类上限"
      :model-value="dialogVisibleChangeGC"
      :close-on-click-modal= "false"
      width="50%" @close='closeChangeGC'>
    <el-form label-width='70px' :model='changeGCForm'>
      <el-form-item prop="list[0].upperLimit">
        <span>蔬菜上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[0].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[1].upperLimit">
        <span>肉类上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[1].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[2].upperLimit">
        <span>蛋类上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[2].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[3].upperLimit">
        <span>禽类上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[3].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[4].upperLimit">
        <span>玉米上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[4].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[5].upperLimit">
        <span>水果上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[5].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[6].upperLimit">
        <span>畜肉上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[6].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[7].upperLimit">
        <span>水产上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[7].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[8].upperLimit">
        <span>大米上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[8].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[9].upperLimit">
        <span>特产上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[9].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="list[10].upperLimit">
        <span>赠品上限：&nbsp;</span>
        <el-input v-model="changeGCForm.list[10].upperLimit" style="width: 70%"/>
      </el-form-item>
      <el-form-item>

      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleChangeGC = false">取 消</el-button>
          <el-button type="primary" @click="changeVipGoodsCat()">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {
  Edit, Sunny, Moon
} from '@element-plus/icons-vue'
import {changeGoodDetail, getVipCardGoods} from "@/service/MenuService";
const { proxy } = getCurrentInstance()

// 商品列表
// const queryInfo = reactive({
//   dishesName: '',
//   currentPage: 1,
//   pageSize: 100
// })
// let goodList = reactive([])
const cardList = reactive([])
// 修改vip卡本周菜品
const dialogVisibleChange = ref(false)
const cgId = ref('')
const addGCId = ref('')
const cgGCId = ref('')
const cgGCBtn = true
const changeForm = reactive({
  dishesId: '',
  // quantity: '',
  cycle: '',
  frequency: '',
})
let goodOptions = ref([])
const changeRef = ref('')
const middleList = reactive([])
const vipGoods = reactive({})
const loading = ref(false)
// 配送周期
const cycleList = reactive([
  {label: '每周', value: '每周'},
  {label: '每月', value: '每月'},
  {label: '每季', value: '每季'},
  {label: '每年', value: '每年'},
  {label: '单次', value: '单次'}
])
// 商品分类
// const goodCat = reactive([
//   {label: '肉', value: '肉'},
//   {label: '蛋', value: '蛋'},
//   {label: '蔬菜', value: '蔬菜'},
//   {label: '大米', value: '大米'},
//   {label: '水产', value: '水产'},
//   {label: '特产', value: '特产'}
// ])
// 修改配送状态
const cgStatusForm = reactive({})
const dialogVisibleChangeGood = ref(false)
const changeStatusRef = ref('')

// 添加会员卡菜分类上限
const dialogVisibleAddGC = ref(false)
const addGCRef = ref('')
const addGCForm = reactive({
  cardType: addGCId.value,
  list: [
    {vegetables: '蔬菜', upperLimit: ''},
    {vegetables: '肉', upperLimit: ''},
    {vegetables: '蛋', upperLimit: ''},
    {vegetables: '禽类', upperLimit: ''},
    {vegetables: '玉米', upperLimit: ''},
    {vegetables: '水果', upperLimit: ''},
    {vegetables: '畜肉', upperLimit: ''},
    {vegetables: '水产', upperLimit: ''},
    {vegetables: '大米', upperLimit: ''},
    {vegetables: '特产', upperLimit: ''},
    {vegetables: '赠品', upperLimit: ''}
  ]
})

// 修改会员卡菜分类上限
const dialogVisibleChangeGC = ref(false)
const changeGCForm = reactive({
  cardType: cgGCId.value,
  list: [
    {vegetables: '蔬菜', upperLimit: ''},
    {vegetables: '肉', upperLimit: ''},
    {vegetables: '蛋', upperLimit: ''},
    {vegetables: '禽类', upperLimit: ''},
    {vegetables: '玉米', upperLimit: ''},
    {vegetables: '水果', upperLimit: ''},
    {vegetables: '畜肉', upperLimit: ''},
    {vegetables: '水产', upperLimit: ''},
    {vegetables: '大米', upperLimit: ''},
    {vegetables: '特产', upperLimit: ''},
    {vegetables: '赠品', upperLimit: ''}
  ]
})

// 渲染网页
onMounted(() => {
  getVipCards()
})
// 修改el-table默认样式
const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center'
  }
}

// 清空表单
const rstForm = () => {
  changeRef.value.resetFields()
}
// const rstCgForm = () => {
//   changeStatusRef.value.resetFields()
// }
// 获取vip卡数据
const getVipCards = async () => {
  const {data: res} = await proxy.$http.MenuService.getVipCards()
  if (res.code !== 200) return proxy.$message('获取会员卡列表失败')
  cardList.length = 0
  for (let i= 0; i < res.data.length; i++) {
    // console.log(res.data[i])
    if (res.data[i].type !== '10斤大米兑换卡') cardList.push(res.data[i])
  }
}

// 获取菜品数据
// const getGoodInfo = async () => {
//   const {data: res} = await proxy.$http.MenuService.getGoods(queryInfo)
//   if (res.code !== 200) return proxy.$message('获取商品列表失败')
//   goodList.length = 0
//   for (let i= 0; i < res.data.records.length; i++) {
//     goodList.push(res.data.records[i])
//   }
// }

// 模糊搜索
const remoteMethod = query => {
    loading.value = true
    setTimeout(async () => {
      loading.value = false
      const {data: res} = await proxy.$http.MenuService.getGoods({'dishesName': query, pageSize:999, currentPage: 1})
      goodOptions.value = (res.data.records)
    }, 500)
}

// 获取vip卡中菜品数据
const getVipGoods = async (row, expandedRows) => {
  if (expandedRows.length > 0) {
    const {data: res} = await proxy.$http.MenuService.getVipCardGoods({cardType :row.type})
    if(res.code!==200) return proxy.$message.error(res.msg)
	middleList.length = 0
    const vegetableList=[]
    const meetList=[]
    const eggList=[]
    const fishList=[]
    const bestList=[]
    const riceList=[]
    const cornList=[]
    const fruitList=[]
    const birdList=[]
    const meetliveList=[]
    const freeList=[]
    for (let i= 0; i < res.data.length; i++) {
      if (res.data[i].type === '蔬菜') vegetableList.push(res.data[i])
      if (res.data[i].type === '肉') meetList.push(res.data[i])
      if (res.data[i].type === '蛋') eggList.push(res.data[i])
      if (res.data[i].type === '水产') fishList.push(res.data[i])
      if (res.data[i].type === '特产') bestList.push(res.data[i])
      if (res.data[i].type === '大米') riceList.push(res.data[i])
      if (res.data[i].type === '玉米') cornList.push(res.data[i])
      if (res.data[i].type === '水果') fruitList.push(res.data[i])
      if (res.data[i].type === '禽类') birdList.push(res.data[i])
      if (res.data[i].type === '畜肉') meetliveList.push(res.data[i])
      if (res.data[i].type === '赠品') freeList.push(res.data[i])
      middleList.push(res.data[i])
    }
    // vipGoods[row.type]=[...middleList]
    vipGoods[row.type + '蔬菜']=[...vegetableList]
    vipGoods[row.type + '肉']=[...meetList]
    vipGoods[row.type + '蛋']=[...eggList]
    vipGoods[row.type + '水产']=[...fishList]
    vipGoods[row.type + '特产']=[...bestList]
    vipGoods[row.type + '大米']=[...riceList]
    vipGoods[row.type + '玉米']=[...cornList]
    vipGoods[row.type + '水果']=[...fruitList]
    vipGoods[row.type + '禽类']=[...birdList]
    vipGoods[row.type + '畜肉']=[...meetliveList]
    vipGoods[row.type + '赠品']=[...freeList]
  }else console.log('close')
}

// 修改vip卡本周菜品
const dialogVisibleCg = id => {
  // getGoodInfo()
  remoteMethod()
  cgId.value = id
  dialogVisibleChange.value = true
}

const changeVipGoods = async () => {
  const {data: res} = await proxy.$http.MenuService.addVipCardGoods({'cardType': cgId.value, ...changeForm})
  if (res.code !== 200) return proxy.$message.error(`修改会员卡菜品失败${res.msg}`)
  rstForm()
  const mid = {type : cgId.value}
  await getVipGoods(mid, [1])
  proxy.$message.success('修改会员卡菜品成功')
  dialogVisibleChange.value = false
}
const closeChange = () => {
  dialogVisibleChange.value = false
}

// 删除vip卡中菜品
const deleteVipGoods = async (cardId, goodId) => {
  proxy.$messageBox.confirm('此操作将菜品从该卡中删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const {data: res} = await proxy.$http.MenuService.deleteVipCardGoods({'cardComboId': goodId})
    if (res.code === 200) {
      // await getGoodInfo()
      const mid = {type : cardId}
      await getVipGoods(mid, [1])
      return proxy.$message.success(res.msg)
    }
    proxy.$message.error(res.msg)
  })
      .catch(() => {
        proxy.$message('cancel')
      })
}

// 修改会员卡下菜品配送状态
const changeThisVipGoodsStatus = (cardId, goodId) => {
  getChangeGoodDetail(cardId, goodId)
  dialogVisibleChangeGood.value = true
}
const closeChangeStatus = () => {
  dialogVisibleChangeGood.value = false
}

const changeVipGoodsStatus = async () => {
  const {data: res} = await proxy.$http.MenuService.changeGoodDetail({...cgStatusForm})
  if (res.code !== 200) return proxy.$message.error('修改会员卡菜品失败')
  
  const mid = {type : cgStatusForm.cardTypeId}
  await getVipGoods(mid, [1])
  proxy.$message.success('修改会员卡菜品成功')
  dialogVisibleChangeGood.value = false
}

// 获取选择卡下菜品详情信息
const getChangeGoodDetail = async (cardId, goodId) => {
  const {data: res} = await proxy.$http.MenuService.getVipCardGoods({cardType: cardId, cardComboId: goodId})
  if(res.code!==200) return proxy.$message.error(res.msg)
  cgStatusForm.dishesName = res.data[0].dishesName
  cgStatusForm.id = res.data[0].id
  cgStatusForm.cycle = res.data[0].cycle
  cgStatusForm.frequency = res.data[0].frequency
}

// 添加会员卡菜分类上限
const closeAddGC = () => {
  dialogVisibleAddGC.value = false
}
const rstAddGC = () => {
  addGCRef.value.resetFields()
}
const dialogVisibleAddGCMethod = type => {
  dialogVisibleAddGC.value = true
  addGCId.value = type
}
const addVipGoodsCat = async () => {
  addGCForm.cardType = addGCId.value
  const middleList = []
  console.log('addGCFormBefore', addGCForm)
  for (let i = 0; i < addGCForm.list.length; i++) {
    if (addGCForm.list[i].upperLimit !== '') {
      middleList.push(addGCForm.list[i])
    }
  }
  console.log('addGCFormAfter', {cardType: addGCForm.cardType, list: middleList})
  const {data: res} = await proxy.$http.MenuService.addVipGoodCat({cardType: addGCForm.cardType, list: middleList})
  if (res.code !== 200) return proxy.$message.error('添加会员卡菜分类上限失败')
  proxy.$message.success('添加会员卡菜分类上限成功')
  rstAddGC()
  dialogVisibleAddGC.value = false
}

// 获取会员卡菜分类上限
const getChangeGC = async type => {
  const {data: res} = await proxy.$http.MenuService.getVipGoodCat({cardType: type})
  if (res.data.length !==0) {
	for (let j = 0; j < changeGCForm.list.length; j++) {
		changeGCForm.list[j].upperLimit=''
	}
    for (let i = 0; i < res.data.length; i++) {
      delete(res.data[i].cardType)
	  for (let j = 0; j < changeGCForm.list.length; j++) {
		 // changeGCForm.list[j].upperLimit=''
	    // if(res.data[i].vegetables==changeGCForm.list[j].vegetables){
			if (res.data[i].vegetables ==changeGCForm.list[j].vegetables){
				changeGCForm.list[j].upperLimit = res.data[i].upperLimit
			}
		// }
	  }
      // changeGCForm.list[i] = res.data[i]
    }
  }
  // else {
  //   changeGCForm.list = [
  //     {vegetables: '蔬菜', upperLimit: ''},
  //     {vegetables: '肉', upperLimit: ''},
  //     {vegetables: '蛋', upperLimit: ''},
  //     {vegetables: '禽类', upperLimit: ''},
  //     {vegetables: '玉米', upperLimit: ''},
  //     {vegetables: '水果', upperLimit: ''},
  //     {vegetables: '畜肉', upperLimit: ''},
  //     {vegetables: '水产', upperLimit: ''},
  //     {vegetables: '大米', upperLimit: ''},
  //     {vegetables: '特产', upperLimit: ''},
  //     {vegetables: '赠品', upperLimit: ''}
  //   ]
  // }
  
}

// 修改会员卡菜分类上限
const closeChangeGC = () => {
  dialogVisibleChangeGC.value = false
}
const dialogVisibleChangeGCMethod = type => {
  getChangeGC(type)
  dialogVisibleChangeGC.value = true
  cgGCId.value = type
}
const changeVipGoodsCat = async () => {
  changeGCForm.cardType = cgGCId.value
  const {data: res} = await proxy.$http.MenuService.changeVipGoodCat(changeGCForm)
  if (res.code !== 200) return proxy.$message.error('修改会员卡菜分类上限失败')
  proxy.$message.success('修改会员卡菜分类上限成功')
  dialogVisibleChangeGC.value = false
}

const isV = type => {
	if(Object.keys(vipGoods).length!=0){
		if(vipGoods[type + '蔬菜'].length > 0) return true
		else return false
	} 
}
const isM = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '肉'].length > 0) return true
  else return false
  }
}
const isE = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '蛋'].length > 0) return true
  else return false
  }
}
const isF = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '水产'].length > 0) return true
  else return false
  }
}
const isB = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '特产'].length > 0) return true
  else return false
  }
}
const isR = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '大米'].length > 0) return true
  else return false
  }
}
const isC = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '玉米'].length > 0) return true
  else return false
  }
}
const isFF = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '水果'].length > 0) return true
  else return false
  }
}
const isBB = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '禽类'].length > 0) return true
  else return false
  }
}
const isMM = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '畜肉'].length > 0) return true
  else return false
  }
}
const isFFF = type => {
	if(Object.keys(vipGoods).length!=0){
  if(vipGoods[type + '赠品'].length > 0) return true
  else return false
  }
}
</script>

<style scoped lang="scss">
.search{
  width: 25%;
}
.card_search{
  display: flex;
  justify-content: right;
}

.add-btn {
  height: 40px;
  display: flex;
  margin-right: 50px;
  .el-button {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(0,152,131);
    height: 100%;
    color: white;
  }
}

:deep(.search .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.search .el-input__inner) {
  color: white
}
:deep(.el-input__inner) {
  &::placeholder{
    color: white;
    font-size: 16px
  }
}

:deep(.search .el-icon) {
  color: white;
}

.table {
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
}



:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}
:deep(.el-table__body .el-button){
  border: 1px solid white;
  background-color: rgb(0,152,131);
}
:deep(.el-table__body .el-button:hover){
  color: rgb(57,62,74);
  background-color: white !important;
}
:deep(.el-table__body .el-table__expand-icon){
  color: white;
}
.good_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  dl {
    width: 150px;
    height: 150px;
    padding: 10px 25px;
    box-sizing: border-box;
    margin-left: 26px;
    margin-top: 20px;
	margin-bottom: 50px;
    border: 2px solid rgba(75,66,49,0.8);
    dt{
      width: 100px;
      height: 100px;
      img {
        width: 100%;
      }
    }
    dd{
      height: 20px;
      width: 100px;
      margin-top: 10px;
      text-align: center;
    }
    .el-button{
      color: white;
      transform: translateX(-25%) translateY(-15%);
      margin-right: 5px;
      opacity: 0.9;
    }
  }
}

.el-pagination{
  right: 8%;
  bottom: 2%;
  position: fixed;
}

input[type="file"] {
  display: none;
}

.doGoods {
  display: flex;
  margin-top: 18px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
